---
layout: default
title: Mapbox
hidden: true
options: full bleed
head: |
    <script src='index.js'></script>
    <link href='index.css' rel='stylesheet' />
---

<a id='win32' class='fixed'></a>
<a id='win64' class='fixed'></a>
<a id='linux' class='fixed'></a>
<a id='darwin' class='fixed'></a>

<section class="fill-midnight intro clip">
    <div class="limiter pad8y clearfix contain dark">
     
     <div class="clearfix space-bottom2 space-top8">

    <div class="col6 prose-big prose space-top4">
      <h2 class="fancy">Mapbox Studio Classic</h2>
      <p class="bottom-space4 col9">Design radically custom maps and datasets powered by vector tiles.</p>
    </div>

    <div class="device device-browser device-studio hide-mobile col7">
            <div class="device-content">
            <div class="clearfix contain clip row11 mobile-cols studio-editor">
                <div class="fill-denim pin-left pad1">
                    <div class="block icon dot fill-darken1 space-bottom1"></div>
                    <div class="block icon dot fill-darken1 space-bottom1"></div>
                    <div class="block icon dot fill-darken1 space-bottom1"></div>
                    <div class="block icon dot fill-darken1 space-bottom1"></div>
                    <div class="pin-bottomleft pad1">
                        <div class="block icon dot fill-darken1"></div>
                    </div>
                </div>

<!-- source UI -->
                <div class="fill-denim pin-right col4 studio-editor-source">
                    <div class="contain mobile-cols space-bottom1">
                        <div class="col9 margin1 pad1 fill-blue"></div>
                        <div class="col2 pad1"></div>
                    </div>
                    <div class="pad0y pad1x clip mobile-cols">
                    <div class="space-top1 contain clip mobile-cols">
                        <div class="col3 icon marker"></div>
                        <div class="col7 textline2"></div>
                    </div>
                    <div class="contain clip mobile-cols">
                        <div class="col3 icon marker"></div>
                        <div class="col7 textline2"></div>
                    </div>
                    <div class="contain clip mobile-cols">
                        <div class="col3 icon marker"></div>
                        <div class="col7 textline2"></div>
                    </div>
                    <div class="contain clip mobile-cols">
                        <div class="col3 icon marker"></div>
                        <div class="col7 textline2"></div>
                    </div>
                    </div>
                </div>

<!-- style UI -->
                <div class="fill-white pin-right col4 studio-editor-style">
                    <div class="contain mobile-cols">
                        <div class="col9 margin1 pad1 fill-light"></div>
                        <div class="col2 pad1"></div>
                    </div>
                    <div class="pad2y pad2x clip mobile-cols">
                        <div class="textline col5"></div>
                        <div class="textline col7"></div>
                        <div class="textline col7"></div>
                        <div class="textline col2"></div>
                        <div class="textline col2"></div>
                        <div class="textline col7"></div>
                        <div class="textline col2"></div>
                        <div class="textline col2"></div>
                        <div class="textline col7"></div>
                        <div class="textline col7"></div>
                    </div>
                </div>

            </div></div>
            <div class="device-details"></div>
        </div></div>

   {% include download.html %}


        <div class="micro space-bottom3">
            <span class="quiet pad0">Available for</span>
            <span class="pill mobile-cols">
                <a class="inline pad0x fill-darken1" href="#darwin">OS X</a><!--
             --><a class="inline pad0x fill-darken1" href="#win32">Win 32-bit</a><!--
             --><a class="inline pad0x fill-darken1" href="#win64">Win 64-bit</a><!--
             --><a class="inline pad0x fill-darken1" href="#linux">Linux</a>
            </span>
            <span class="quiet pad0">with code on</span>
            <a class="inline icon github pad0x round fill-darken1" href="https://github.com/mapbox/mapbox-studio" target="_blank">GitHub</a>
        </div>
    </div>
</section>

<div class="modal-content modal active" id='removeme'>
   <div class='modal-popup modal-auth'>
      <div class='col6 fill-white modal-body round-top contain prose'>
         <div class='pad4'>
            Mapbox Studio Classic has been replaced by the new
            <a href='https://www.mapbox.com/mapbox-studio/'>Mapbox Studio</a>.

            <a class='button col12 space-top2 big' href='https://www.mapbox.com/mapbox-studio/'>Try Mapbox Studio</a>
            <a href='#' class='small space-top1 block center quiet' id='remove-modal'>I really want Mapbox Studio Classic</a>
         </div>
      </div>
   </div>
</div>

<script>
$('#remove-modal').click(function(e) {
   e.preventDefault();
   $('#removeme').remove();
});
</script>
